<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Web tiled</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/nihilo/nihilo.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      }
      body{
        background-color: #fff; overflow:hidden;
        font-family: sans-serif;
      }
      #header {
        padding: 4px 15px 4px 0;
        background-color: #F2F2EC;
        color: #575757;
        font-size: 16pt;
        text-align: right;
        font-weight: bold;
        height:55px;
      }
      #subheader {
        color: #575757;
        font-size: small;
        padding: 5px 0 0 0;
        text-align: right;
      }
      #subheader a { color: #575757; }

      .ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }
      #ds-h div { width: 100%; }
      #ds .o1 { filter: alpha(opacity=10); opacity: .1; }
      #ds .o2 { filter: alpha(opacity=8); opacity: .08; }
      #ds .o3 { filter: alpha(opacity=6); opacity: .06; }
      #ds .o4 { filter: alpha(opacity=4); opacity: .04; }
      #ds .o5 { filter: alpha(opacity=2); opacity: .02; }
      #ds .h1 { height: 1px; }
      #ds .h2 { height: 2px; }
      #ds .h3 { height: 3px; }
      #ds .h4 { height: 4px; }
      #ds .h5 { height: 5px; }
    </style>
    <script type="text/javascript">
        var dojoConfig = {
            async: true,
            packages: [{
                "name": "bism",
                "location": location.pathname.replace(/\/[^/]+$/, "") + "bism/"
            }]
        };
    </script>
    <script src="http://js.arcgis.com/3.14/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/geometry/Extent","esri/SpatialReference","esri/layers/TileInfo",
        "bism/SubTiledMapServiceLayer","esri/layers/WebTiledLayer","esri/layers/ArcGISTiledMapServiceLayer","esri/layers/TiledMapServiceLayer","esri/symbols/SimpleFillSymbol",
        "esri/layers/FeatureLayer", "esri/tasks/query","esri/tasks/QueryTask","esri/geometry/webMercatorUtils","esri/graphic",
        "dojo/parser","dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, Extent,SpatialReference,TileInfo,SubTiledMapServiceLayer, WebTiledLayer, ArcGISTiledMapServiceLayer,TiledMapServiceLayer,SimpleFillSymbol,
        FeatureLayer,Query,QueryTask,webMercatorUtils,Graphic,parser
      ) {
        parser.parse();
				spatialReference = new SpatialReference({
          wkt: 'PROJCS["CGCS2000_3_Degree_GK_CM_117E",GEOGCS["GCS_China_Geodetic_Coordinate_System_2000",DATUM["D_China_2000",SPHEROID["CGCS2000",6378137.0,298.257222101]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Gauss_Kruger"],PARAMETER["False_Easting",500000.0],PARAMETER["False_Northing",0.0],PARAMETER["Central_Meridian",118.5],PARAMETER["Scale_Factor",1.0],PARAMETER["Latitude_Of_Origin",0.0],UNIT["Meter",1.0]]'
        });
        map = new Map("map", {
          //center: [118.797697,  32.016798],
          zoom: 4,
          //spatialReference : spatialReference
        });
        
        
        var World_Topo_Map = "https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer";
        var tiled = new ArcGISTiledMapServiceLayer(World_Topo_Map);
        map.addLayer(tiled);
        
        var feature;
	      var query = new Query();
	      query.outFields = [ "*" ];
	      query.where = "1=1";
	      query.returnGeometry = true;
		  query.orderByFields = ["pop2000 DESC"];
	      var queryUrl = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2";
	      var queryTask = new QueryTask(queryUrl);   
	      
        tiled.on('load',function(res){  
        	var layer = res.layer;
	  			queryTask.execute(query, function(response){
	          var features = response.features;
	          feature = features[0];
			  var sfs = new SimpleFillSymbol({
				"color": null,
				"outline": {
					"color": [255, 0, 0],
					"width": 0.375,
					"type": "esriSLS",
					"style": "esriSLSSolid"
				},
				"type": "esriSFS",
				"style": "esriSFSSolid"
			});

			  var webMercatorGeo = webMercatorUtils.geographicToWebMercator(feature.geometry);
			  var g = new Graphic(webMercatorGeo, sfs, null, null);
			  map.graphics.add(g);
	          // map.graphics.add(features[0])
	          var options = {
	          	url:"https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",
	          	geometry:webMercatorGeo,
	          	tileInfo:layer.tileInfo,
	          	fullExtent:layer.fullExtent,
	          	initialExtent:layer.initialExtent,
				spatialReference:layer.spatialReference
	          }
	          var subLayer = new SubTiledMapServiceLayer(options);
			  map.addLayer(subLayer);
				var bg_url = "https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer/tile/${level}/${row}/${col}?f=png";
		        var cycleMap = new WebTiledLayer(bg_url, {
		          "copyright": "iReadyIT Map",
		          "id": "dh_Map",
		          tileInfo:layer.tileInfo,
		        });
		        // map.addLayer(cycleMap,0);
		      });
        })
      });
      
    </script>
  </head>
  <body class="nihilo">
    <div id="mainWindow"
         data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
      <div id="map" class="shadow"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'center'">
        <div id="ds">
          <div id="ds-h">
            <div class="ds h1 o1"></div>
            <div class="ds h2 o2"></div>
            <div class="ds h3 o3"></div>
            <div class="ds h4 o4"></div>
            <div class="ds h5 o5"></div>
          </div>
        </div> 

      </div>
    </div>
  </body>
</html>
